<!--
* @FileDescription: 自由报表
* @Author: yuec621@outlook.com
* @Date: 2025-04-08 16:15:22
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-07-16 13:47:22
-->
<template>
    <div class="pagestyle">
        <el-row :gutter="20">
            <el-col :span="24">
                <p class="tipBox">
                    <span :style="{color:isDark?'#fff':''}">
                        若无您需要的自由报表，请先 <el-button style="margin: 0 10px;" type="text" @click="addTempClick">新建模板
                        </el-button>!
                    </span>
                </p>
            </el-col>
            <el-col :span="3">
                <div class="leftBox" :style="{background:isDark?'rgba(255, 255, 255, 0.8)':''}">
                    <el-input style="margin: 11px 0;" v-model="state.inputSearch" placeholder="请输入"
                        @blur="inputSearchBlur">
                        <template #suffix>
                            <el-icon>
                                <search />
                            </el-icon>
                        </template>
                    </el-input>
                    <div class="leftmenuList">
                        <div class="leftLabel" :class="state.leftLabelType==item.itemName?'active':''"
                            @click="leftClick(item)" v-for="item in state.freeReportTemplateList" :key="item.itemName">
                            {{ item.itemName }}
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="21">
                <div class="querybox" style="width: 100%;" :style="{background:isDark?'rgba(255, 255, 255, 0.8)':''}">
                    <querybox style="width: 100%;" :queryList="state.options.queryList.querys" @query="query">
                    </querybox>
                </div>
                <div class="tableBox" :style="{background:isDark?'rgba(255, 255, 255, 0.8)':''}">
                    <p class="tableBoxT">
                        <span class="biao">自由报表</span>
                        <span class="span"> <span :class="
                        state.listBtnType == 1 ? 'listInfoBtn active' : 'listInfoBtn'
                      " @click="listInfoBtnClick(1)">
                                <svg-icon :class="state.listBtnType == 1 ? 'active' : ''" class-name="search-icon"
                                    icon-class="dayin" />
                                打印
                            </span>
                            <span :class="
                        state.listBtnType == 1 ? 'listInfoBtn active' : 'listInfoBtn'
                      " @click="listInfoBtnClick(2)">
                                <svg-icon :class="state.listBtnType == 1 ? 'active' : ''" class-name="search-icon"
                                    icon-class="shezhi" />
                                测点排序
                            </span>
                            <span :class="
                        state.listBtnType == 1 ? 'listInfoBtn active' : 'listInfoBtn'
                      " @click="listInfoBtnClick(3)">
                                <svg-icon :class="state.listBtnType == 1 ? 'active' : ''" class-name="search-icon"
                                    icon-class="shezhi" />
                                保存模板
                            </span>
                            <span :class="
                        state.listBtnType == 4 ? 'listInfoBtn active' : 'listInfoBtn'
                      " @click="listInfoBtnClick(4)">
                                <svg-icon :class="state.listBtnType == 4 ? 'active' : ''" class-name="search-icon"
                                    icon-class="xiazai" />
                                下载
                            </span></span>
                    </p>
                    <div ref="printArea">
                        <div v-if="theadsNew.length>0">
                            <vxe-grid ref="xGrid" v-bind="{
                            border: 'inner',
                            loading: state.tableLoading,
                            columns:theadsNew,
                            data:state.tableData,
                            height: theadsNewDetail.length>0?'200':'500',
                          }" :virtual-y-config="{enabled: true, gt: 100}"></vxe-grid>
                        </div>
                        <div v-if="theadsNewDetail.length>0">
                            <vxe-table :scroll-y="{enabled: true, gt: 100}" :loading="state.tableLoading" :span-method="rowspanMethod"
                                :data="state.tableDataDetail" ref="xGrid1" stripe @resizable-change="resizeChange"
                                :height="theadsNew.length>0?'300':'500'" :key="state.tableDataDetail">
                                <vxe-column v-for="(item, index) in theadsNewDetail" :field="item.field"
                                    :title="item.name" :width="item.width==null?'auto':item.width" :params="{ name: item.name }" :key="index">
                                </vxe-column>
                            </vxe-table>
                        </div>
                    </div>
                </div>
                <!-- 新建模板抽屉 -->
                <el-drawer v-model="state.drawerShow" direction="rtl" size="40%" close-on-click-modal :modal="true">
                    <template #header="{ close, titleId, titleClass }">
                        <h4 class="mask_sub_title">
                            <svg-icon class-name="search-icon" icon-class="biaotitubiao" />
                            <span>{{state.tihuanState}}</span>
                        </h4>
                    </template>
                    <template #default>
                        <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="left">
                            <el-row :gutter="20"
                                style="background-color: rgba(91, 109, 128, 0.04);border-radius: 8px;margin: 0 0px;">
                                <el-col :span="24">
                                    <el-form-item label="选择新建">
                                        <el-select :disabled="state.tihuanState == '替换模板'" class="w100"
                                            v-model="state.formData.itemName" clearable placeholder="请选择"
                                            @change="listChange">
                                            <el-option v-for="(itemsub,index) in  state.selAddTempList"
                                                :key="itemsub.itemName" :label="itemsub.itemName"
                                                :value="itemsub.itemName">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="报表类型">
                                        <el-radio-group :disabled="state.tihuanState == '替换模板'||state.disShowType"
                                            v-model="state.formData.type" @change="listChange()">
                                            <el-radio v-for="itemop in [{
                                                        label:'年报表',
                                                        value:'Y'
                                                    },{
                                                        label:'月报表',
                                                        value:'M'
                                                    },{
                                                        label:'周报表',
                                                        value:'W'
                                                    },{
                                                        label:'日报表',
                                                        value:'D'
                                                    },{
                                                        label:'班次报表',
                                                        value:'C'
                                                    }]" :label="itemop.value">
                                                {{itemop.label}}
                                            </el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <p class="drawer_sub_title" style="margin-left: -10px;">
                                <span> 显示字段</span>
                            </p>
                            <vxe-table ref="addxTableRef" height="450" v-if="state.fieldInfoListData.length>0"
                                :data="state.fieldInfoListData" stripe border="inner"
                                :checkbox-config="{ checkField: 'checked' }">
                                <vxe-column type="checkbox" :width="42"></vxe-column>
                                <vxe-column field="name" title="标题"></vxe-column>
                                <vxe-column field="type" title="排序">
                                    <template #default="{ row }">
                                        <svg-icon class="drag-btn" style="cursor: move;" class-name="search-icon"
                                            icon-class="tuodongpaixu" />
                                    </template>
                                </vxe-column>
                            </vxe-table>
                            <vxe-table ref="addxTableRef1" v-if="state.fieldInfoListDatadesc.length>0" height="450"
                                :data="state.fieldInfoListDatadesc" stripe border="inner"
                                :checkbox-config="{ checkField: 'checked'}"
                                :row-config="{isCurrent: true, isHover: true}" :show-header="false"
                                class="addxTableRef1" highlight-current-row>
                                <vxe-column type="checkbox" :width="42"></vxe-column>
                                <vxe-column field="name" title="标题"></vxe-column>
                                <vxe-column field="type" title="排序">
                                    <template #default="{ row }">
                                        <svg-icon class="drag-btn" style="cursor: move;" class-name="search-icon"
                                            icon-class="tuodongpaixu" />
                                    </template>
                                </vxe-column>
                            </vxe-table>
                        </el-form>
                    </template>
                    <template #footer>
                        <el-button type="info" @click="cacelNewTempClick">取消</el-button>
                        <el-button type="primary" @click="addNewTempClick">{{state.tihuanState}}
                        </el-button>
                    </template>
                </el-drawer>
                <!-- 测点排序 -->
                <teleport to="body">
                    <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="910" :height="auto"
                        v-model="state.addModal" resize :mask="true" showFooter>
                        <template #title>
                            <div class="w100 h100 fsc mask_title">测点排序</div>
                        </template>
                        <template #default>
                            <div class="form_box">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <div class="pointBox">
                                            <p>设备名称</p>
                                            <div style="padding: 0 12px;">
                                                <el-input style="margin: 11px 0;" v-model="state.sortdevice"
                                                    placeholder="请输入" @blur="sortdeviceBlur">
                                                    <template #suffix>
                                                        <el-icon>
                                                            <search />
                                                        </el-icon>
                                                    </template>
                                                </el-input>
                                                <vxe-table ref="devicexTableRef" class="tableFontSize" height="400"
                                                    :data="state.sortdeviceList" stripe border="inner"
                                                    :radio-config="{highlight: true}" @radio-change="radioChangeEvent">
                                                    <vxe-column type="radio" :width="42"></vxe-column>
                                                    <vxe-column field="sensorName" title="设备名称"></vxe-column>
                                                    <vxe-column field="sort" title="排序">
                                                        <template #default="{ row }">
                                                            <svg-icon class="drag-btndevice" style="cursor: move;"
                                                                class-name="search-icon" icon-class="tuodongpaixu" />
                                                        </template>
                                                    </vxe-column>
                                                </vxe-table>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="pointBox">
                                            <p>测点列表</p>
                                            <div style="padding: 0 12px;">
                                                <el-input style="margin: 11px 0;" v-model="state.sortpoint"
                                                    placeholder="请输入" @blur="sortpointBlur">
                                                    <template #suffix>
                                                        <el-icon>
                                                            <search />
                                                        </el-icon>
                                                    </template>
                                                </el-input>
                                                <vxe-table ref="pointxTableRef" class="tableFontSize" height="400"
                                                    :data="state.sortpointList" stripe border="inner">
                                                    <vxe-column field="pointId" title="测点号"></vxe-column>
                                                    <vxe-column field="place" title="安装地点"></vxe-column>
                                                    <vxe-column field="sort" title="排序">
                                                        <template #default="{ row }">
                                                            <svg-icon class="drag-btnpoint" style="cursor: move;"
                                                                class-name="search-icon" icon-class="tuodongpaixu" />
                                                        </template>
                                                    </vxe-column>
                                                </vxe-table>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </template>
                        <template #footer>
                            <el-button @click="cancelpoint">取消</el-button>
                            <el-button type="primary" @click="submitFormpoint">
                                确定
                            </el-button>
                        </template>
                    </vxe-modal>
                </teleport>
            </el-col>
        </el-row>
        <confirmCom :tihuanTempShow="state.tihuanTempShow">
            <template v-slot:confirmImg>
                <img src="@/assets/images/tihuanmoban.png" alt="" />
            </template>
            <template v-slot:confirmTip>
                <p>
                    {{state.leftLabelType}}({{state.options.queryList.querys[0].binddata == 'Y' ? '年报表' : state.options.queryList.querys[0].binddata
                     == 'M' ? '月报表' : state.options.queryList.querys[0].binddata == 'W' ? '周报表' :
                    state.options.queryList.querys[0].binddata == 'D' ? '日报表' : '班次报表'}})<br />报表已存在,是否替换？
                </p>
            </template>
            <template v-slot:confirmBtn>
                <p>
                    <el-button type="info" @click="cacelNewTempClick">取消</el-button>
                    <el-button type="primary" @click="tihuanNewTempClick">替换</el-button>
                </p>
            </template>
        </confirmCom>
    </div>
</template>
<script setup>
    import {
        computed,
        nextTick,
        reactive
    } from "vue";
    import {
        VxeUI
    } from 'vxe-table'
    import Sortable from 'sortablejs'
    import querybox from "@/components/commonCom/querybox";
    import confirmCom from "@/components/commonCom/confirmCom";
    import _ from 'lodash'
    import {
        table_headers
    } from "@/components/commonCom/table_headers";
    import dayjs from "dayjs";
    import isoWeek from 'dayjs/plugin/isoWeek'
    dayjs.extend(isoWeek);
    import axios from "@/utils/request";
    import useSettingsStore from '@/store/modules/settings'
    const settingsStore = useSettingsStore()
    const isDark = computed(() => settingsStore.isDark);
    import {
        getlistSensorName,
    } from "@/api/config";
    const {
        proxy
    } = getCurrentInstance();
    const printArea = ref()
    const addxTableRef = ref(null)
    let state = reactive({
        fieldInfoListDatadesc: [],
        detailUrl: undefined,
        allbanciList: [],
        dataUrl: undefined,
        sortdevice: undefined,
        sortpoint: undefined,
        tableLoading: false,
        topHtml: undefined,
        tableData: [],
        tableDataDetail: [],
        tableheads: computed(() => table_headers.reportSimulatePoint),
        leftLabelType: undefined,
        freeReportTemplateList: [],
        tihuanState: '新建模板',
        input1: '',
        // 新建模板的属性
        drawerShow: false,
        formData: {
            type: 'Y'
        },
        rules: {},
        // 列表顶部按钮
        listBtnType: undefined,
        addModal: false,
        options: {
            queryList: {
                querys: [{
                        col: 12,
                        field: "type",
                        title: "报表类型",
                        type: "radio",
                        binddata: 'Y',
                        isReport: true,
                        options: [{
                            label: '年报表',
                            value: 'Y'
                        }, {
                            label: '月报表',
                            value: 'M'
                        }, {
                            label: '周报表',
                            value: 'W'
                        }, {
                            label: '日报表',
                            value: 'D'
                        }, {
                            label: '班次报表',
                            value: 'C'
                        }],
                    },
                    {
                        field: "datetime",
                        title: "报表时间",
                        type: "datayear", //datetime
                        isReport: true,
                        binddata: dayjs().format('YYYY'),
                        col: 9
                    },
                    {
                        field: "banci",
                        title: "班次选择",
                        type: "yincang", //selectspecial
                        binddata: "",
                        options: [],
                        col: 6
                    },
                    {
                        field: "isShowLocal",
                        title: "只显示当前测点",
                        type: "elcheckbox", //datetime
                        isReport: true,
                        binddata: false,
                        col: 3
                    },
                    {
                        field: 'pointIds',
                        title: "选择测点",
                        type: "cascaderRadionarmal",
                        binddata: [],
                        options: [],
                        isReport: true,
                        props: {
                            children: "children",
                            value: "commonField",
                            label: "commonField",
                            emitPath: false,
                            multiple: true,
                        },
                        col: 6
                    },
                    // {
                    //     field: "sensorNameList",
                    //     title: "设备名称",
                    //     type: "cascaderRadionarmal",
                    //     binddata: [],
                    //     isReport: true,
                    //     options: [],
                    //     props: {
                    //         children: "children",
                    //         value: "name",
                    //         label: "name",
                    //         emitPath: false,
                    //         multiple: true,
                    //         collapse: true
                    //     },
                    //     col: 6
                    // },
                    {
                        field: "pumpName",
                        title: "选择管道",
                        type: "yincang", //multiple_select
                        isReport: true,
                        binddata: '',
                        options: [],
                        col: 6
                    },
                    {
                        field: "isShowLocalPoint",
                        title: "只显示当前抽采点",
                        type: "yincang", //elcheckbox
                        isReport: true,
                        binddata: false,
                        col: 3
                    },
                    {
                        field: "overLimitAlarm",
                        title: "超限断电",
                        type: "yincang", //elcheckbox
                        isReport: true,
                        binddata: false,
                        col: 3
                    },
                    {
                        field: "failureAlarm",
                        title: "故障断电",
                        type: "yincang", //datetime
                        isReport: true,
                        binddata: false,
                        col: 3
                    },

                ],
            }
        },
        rangeTime: {
            field: ['startTime', 'endTime'],
            dataValue: [dayjs().format('YYYY-MM-01 00:00:00'), dayjs().format('YYYY-MM-31 00:00:00')]
        },
        tihuanTempShow: false,
        selAddTempList: [],
        banciList: [],
        classObj: {},
        searchObj: {},
        checkedList: [],
        fieldInfoListData: [],
        leftLabelTypeList: [],
        // 测点排序中测点列表
        sortpointList: [],
        sortdeviceList1: [],
        sortdeviceList: [],
        sortpointList1: [],
        disShowType: false,
        conditionObj: {}
    })


    let theadsNew = ref([])
    let theadsNewDetail = ref([])
    // 选择新建列表接口
    function getselAddTempList() {
        axios.get('/freeReportTemplate/getTemplateNameList').then(res => {
            state.selAddTempList = res.data
        })
    }

    function getallbanciList() {
        axios.post('/class/info/searchAll', {}).then(res => {
            state.allbanciList = res.data.list.map(item => {
                item.teshuid = item.label
                return item
            })
        })
    }
    getallbanciList()
    /**
     * 
     * @param list 回显复选框
     */
    function setCheckedByCondition(list) {
        if (proxy.$refs.addxTableRef) {

            proxy.$refs.addxTableRef.setCheckboxRow(
                list.filter(item => Number(item.show) === 1),
                true
            )
        }
    }
    /**
     * 
     * @param list 回显复选框
     */
    function setCheckedByConditiondesc(list) {
        if (proxy.$refs.addxTableRef1) {
            proxy.$refs.addxTableRef1.setCheckboxRow(
                list.filter(item => Number(item.show) === 1),
                true
            )
        }
    }
    /**
     * 获取抽屉测点列表
     */
    function getattainReportTemplate() {
        axios.post('/freeReportTemplate/attainReportTemplate', {
            type: state.formData.type,
            itemName: state.formData.itemName
        }).then(res => {
            if (res.data.staticsList != null) {
                state.fieldInfoListData = res.data.staticsList
                // 根据条件动态设置选中状态
                setCheckedByCondition(res.data.staticsList)
            } else {
                state.fieldInfoListData = []
            }
            if (res.data.detailList != null) {
                state.fieldInfoListDatadesc = res.data.detailList
                // 根据条件动态设置选中状态
                setCheckedByConditiondesc(res.data.detailList)
            } else {
                state.fieldInfoListDatadesc = []
            }
        })
    }
    /**
     * 
     * @param val 筛选抽屉测点列表
     */
    function listChange(val) {
        if (!state.formData.itemName) {
            proxy.$modal.msgWarning('请选择所要新建的报表');
        } else {
            state.selAddTempList.forEach(item => {
                if (item.itemName == val) {
                    if (item.type != null) {
                        state.formData.type = item.type
                        state.disShowType = true
                    } else {
                        state.disShowType = false
                        state.formData.type = 'Y'
                    }
                }
            })
            getattainReportTemplate()
        }
    }
    // 新建模板点击事件
    let initTime = null

    function addTempClick() {
        state.drawerShow = true
        state.tihuanState = '新建模板'
        state.formData.itemName = undefined
        state.formData.type = undefined
        state.fieldInfoListData = []
        state.fieldInfoListDatadesc = []
        state.disShowType = false
        getselAddTempList()
        nextTick(() => {
            // 加载完成之后在绑定拖动事件
            initTime = setTimeout(() => {
                rowDrop()
            }, 500)
        })
    }

    // 表格上方按钮事件
    async function listInfoBtnClick(type) {
        if (type == 1) {
            if (state.leftLabelType) {
                let $printArea = proxy.$refs.printArea
                if ($printArea) {
                    const html = $printArea.innerHTML;
                    const printWindow = window.open('', '_blank');
                    printWindow.document.write(`
        <!DOCTYPE html>
        <html>
          <head>
            <style>
              @page { size: auto; margin: 0; }
              body { margin: 5mm; }
              table { width: 100%; border-collapse: collapse; }
              .vxe-table--empty-block{
                display:none;
              }
              vxe-header--row,
              .vxe-body--row{
                border:1px solid #ddd;
              }
              .vxe-header--row,
              .vxe-body--column{
                border:1px solid #ddd;
              }

              .vxe-body--y-space{
                display:none;
              }
              .vxe-cell{
                width: auto !important;
                height: auto !important;
                padding: 10px;
              }
              .vxe-cell--title,
              .vxe-cell--label{
                white-space: nowrap;
              }
              .vxe-table--scroll-y-virtual,
              .vxe-table--empty-placeholder{
display:none;
                
              }
              .vxe-table--body,
              .vxe-table--header{
                width:100% !important;

              }
                 .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
        background: white;
        padding: 5mm;
      }
         /* 固定页脚样式 */
      .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: white;
        padding: 5mm;
        text-align: center;
      }
      
            </style>
          </head>
          <body>
            <div>
                ${state.topHtml}
                </div>
                 <div class="content">
                ${html}
                </div>
                <div class="footer">表尾</div>
                </body>
        </html>
      `);
                    printWindow.document.close();
                    printWindow.print();
                }
                // const $table1 = proxy.$refs["xGrid"]
                // const $table2 = proxy.$refs["xGrid1"]
                // if ($table1 && $table2) {
                //     const printRest1 = await $table1.getPrintHtml()
                //     const printRest2 = await $table2.getPrintHtml()
                //     VxeUI.print({
                //         title: '打印多张表',
                //         showPageNumber: true,
                //         pageBreaks: [{
                //             headerHtml: state.topHtml,
                //             bodyHtml: printRest1.html+printRest2.html
                //         }]
                //     })
                // }
            } else {
                proxy.$modal.msgWarning('请先选择所要打印的报表');
            }
        }
        if (type == 2) {
            state.addModal = true
            nextTick(() => {
                rowDropdevice()
                rowDroppoint()
            })
        }
        if (type == 3) {
            if (state.leftLabelType) {
                state.drawerShow = true
                state.tihuanState = '替换模板'
                state.formData.itemName = state.leftLabelType
                state.formData.type = state.options.queryList.querys[0].binddata
                getattainReportTemplate()
                nextTick(() => {
                    // 加载完成之后在绑定拖动事件
                    initTime = setTimeout(() => {
                        rowDrop()
                    }, 500)
                })
            } else {
                proxy.$modal.msgWarning('请先选择所要保存的报表');
            }

        }
        if (type == 4) {
            if (state.tableData.length > 0) {
                proxy.$refs["xGrid1"].exportData({
                    filename: state.leftLabelType,
                    sheetName: state.leftLabelType,
                    type: "xlsx",
                    data: proxy.$refs["xGrid1"].getTableData().tableData,
                });
            } else {
                proxy.$modal.msgWarning('暂无数据下载');
            }
        }
    }
    /**
     * 
     * @param array 所要搜索的数组对象数据
     * @param searchTerm 搜索词
     * @param keys 搜索字段
     */
    function fuzzySearch(array, searchTerm, keys) {
        searchTerm = searchTerm.toLowerCase();
        return array.filter(item => {
            return keys.some(key => {
                const value = item[key] ? item[key].toString().toLowerCase() : '';
                return value.includes(searchTerm);
            });
        });
    }

    // 表格单选框
    const radioChangeEvent = ({
        row
    }) => {
        state.sortpointList = state.sortpointList1
        nextTick(() => {
            const filtered = fuzzySearch(state.sortpointList, row.sensorName, ['sensorName']);
            state.sortpointList = filtered
        })
    }
    /**
     * 测点列表模糊搜索
     * @param val 
     */
    function sortpointBlur(val) {
        state.sortpointList = state.sortpointList1
        nextTick(() => {
            const filtered = fuzzySearch(state.sortpointList, state.sortpoint, ['pointId']);
            state.sortpointList = filtered
        })
    }
    /**
     * 
     * @param val 设备名称模糊搜索
     */
    function sortdeviceBlur(val) {
        state.sortdeviceList = state.sortdeviceList1
        nextTick(() => {
            const filtered = fuzzySearch(state.sortdeviceList, state.sortdevice, ['sensorName']);
            state.sortdeviceList = filtered
        })
    }
    // 只获取最后一级节点组成一维数组
    function flattenTreeToLeaves(tree) {
        let result = [];

        function traverse(node) {
            if (!node.children || node.children.length === 0) {
                result.push(node);
            } else {
                node.children.forEach(child => traverse(child));
            }
        }
        if (Array.isArray(tree)) {
            tree.forEach(root => traverse(root));
        } else {
            traverse(tree);
        }
        return result;
    }

    function getSelList() {
        let isShowLocal
        let isShowLocalPoint
        let type
        state.options.queryList.querys.forEach((item) => {
            if (item.field == 'isShowLocal') {
                isShowLocal = item.binddata
            }
            if (item.field == 'isShowLocalPoint') {
                isShowLocalPoint = item.binddata
            }
            if (item.field == 'type') {
                type = item.binddata
            }
        })
        state.conditionObj = {
            reportName: state.leftLabelType,
            condition: state.conditionObj.condition,
            type: type,
            startTime: state.rangeTime.dataValue.length > 0 ? state.rangeTime.dataValue[0] : '',
            endTime: state.rangeTime.dataValue.length > 0 ? state.rangeTime.dataValue[1] : '',
            isShowLocal: isShowLocal,
            isShowLocalPoint: isShowLocalPoint
        }
        if (state.leftLabelType != '瓦斯抽放报表') {
            axios.post("/freeReportTemplate/attainPointInfo", state.conditionObj).then((res) => {
                state.options.queryList.querys.forEach((item) => {
                    if (item.field == "pointIds") {
                        item.options = res.data.pointList;
                        state.sortpointList = flattenTreeToLeaves(res.data.pointList).map((item,
                            index) => {
                            return {
                                pointId: item.pointId,
                                sensorName: item.sensorName,
                                place: item.place,
                                sort: index + 1
                            }
                        })
                        state.sortpointList1 = state.sortpointList
                    }
                    if (item.field == "sensorNameList") {
                        state.sortdeviceList = res.data.nameList.map((item, index) => {
                            return {
                                sensorName: item.name,
                                sort: index + 1
                            }
                        })
                        item.options = res.data.nameList;
                        state.sortdeviceList1 = state.sortdeviceList

                    }
                });
            });
        } else {
            axios.post('/freeReportTemplate/attainExtractionPoint', state.conditionObj).then(res => {
                state.options.queryList.querys.forEach((item) => {
                    if (item.field == 'pumpName') {
                        item.options = res.data.map(itemsub => {
                            return {
                                label: itemsub,
                                value: itemsub
                            }
                        })
                    }
                })
            })
        }
    }

    function banciList(data) {
        axios.post("/hisPointFeed/handleClassInfo", data).then((res) => {
            state.rangeTime.dataValue = [res.data.feedStartTime, res.data.feedEndTime];
        });
    }
    // 页面初始查询接口
    function getfreeReportTemplateList(data) {
        axios.post('/freeReportTemplate/list', data).then(res => {
            state.freeReportTemplateList = res.data
            state.leftLabelType = undefined
        })
    }

    function inputSearchBlur(val) {
        getfreeReportTemplateList({
            itemName: state.inputSearch
        })
    }

    function groupArraysByField(arr1, arr2, field) {
        return _.groupBy([...arr1, ...arr2], field);
    }

    function leftClick(item) {
        state.leftLabelType = item.itemName
        state.conditionObj = {
            condition: item.flag
        }
        item.freeReportTemplateDtoList.forEach(itemvxe => {
            if (itemvxe.staticsList != null && itemvxe.staticsList.length > 0) {
                itemvxe.staticsList.forEach(itemsub => {
                    itemsub.title = itemsub.name
                    state.allbanciList.forEach(itemall => {
                        if (itemsub.field.includes(itemall.label)) {
                            itemsub.teshuid = itemall.label
                        }
                    })
                })
            }
            if (itemvxe.itemName == '模拟量日班报表') {
                let delarr = []
                if (itemvxe.staticsList != null) {
                    let arr = groupArraysByField(itemvxe.staticsList, state.allbanciList, 'teshuid')
                    let newtheads = []
                    Object.keys(arr).forEach((itemii, index) => {
                        if (itemii != 'undefined') {
                            arr[itemii].pop()
                            arr[itemii].forEach(item => {
                                if (item.name) {
                                    item.itemtitle = item.name
                                    item.title = item.name.split('_')[1]
                                }
                            })
                            newtheads.push({
                                title: arr[itemii][0].itemtitle.split('_')[0], //截取某字符前的内容
                                field: itemii,
                                show: 1,
                                children: arr[itemii]
                            })
                        } else {
                            delarr = arr[itemii]
                        }
                    })
                    delarr.splice(3, 0, ...newtheads)
                    itemvxe.staticsList = delarr
                }
            }
        })
        state.leftLabelTypeList = item.freeReportTemplateDtoList
        state.tableheads = computed(() => table_headers[item.listHeader])
        state.dataUrl = item.url
        state.detailUrl = item.detailUrl
        state.topHtml = `
<h1 class="title" style="text-align: center;font-size: 28px;">${state.leftLabelType}</h1>
`;
        state.options.queryList.querys[0].options = item.freeReportTemplateDtoList.map(itemsub => {
            return {
                value: itemsub.type,
                label: itemsub.type == 'Y' ? '年报表' : itemsub.type == 'M' ? '月报表' : itemsub.type == 'W' ? '周报表' :
                    itemsub.type == 'D' ? '日报表' : '班次报表'
            }
        })
        if (item.freeReportTemplateDtoList[0].type == 'Y') {
            state.options.queryList.querys[1].type = 'datayear'
            state.options.queryList.querys[1].binddata = dayjs().format('YYYY')
        } else if (item.freeReportTemplateDtoList[0].type == 'M') {
            state.options.queryList.querys[1].type = 'datamonth'
            state.options.queryList.querys[1].binddata = dayjs().format('YYYY-MM')
        } else if (item.freeReportTemplateDtoList[0].type == 'W') {
            state.options.queryList.querys[1].type = 'daterange'
            state.options.queryList.querys[1].binddata = [dayjs().startOf('isoWeek'), dayjs().endOf('isoWeek')]
        } else if (item.freeReportTemplateDtoList[0].type == 'D') {
            state.options.queryList.querys[1].type = 'datetimer'
            state.options.queryList.querys[1].binddata = dayjs().format('YYYY-MM-DD')

        } else if (item.freeReportTemplateDtoList[0].type == 'C') {
            state.options.queryList.querys[1].type = 'datetimer'
            state.options.queryList.querys[1].binddata = dayjs().format('YYYY-MM-DD')
        }
        state.options.queryList.querys[0].binddata = item.freeReportTemplateDtoList[0].type
        state.options.queryList.querys.forEach(item => {
            if (state.leftLabelType == '模拟量报警及断电报表') {
                if (item.field == 'overLimitAlarm' || item.field == 'failureAlarm' || item.field ==
                    'isShowLocal') {
                    item.type = 'elcheckbox'
                }
                if (item.field == 'pumpName' || item.field == 'isShowLocalPoint') {
                    item.type = 'yincang'
                }
                if (item.field == 'sensorNameList' || item.field == 'pointIds') {
                    item.type = 'cascaderRadionarmal'
                }
            } else if (state.leftLabelType == '瓦斯抽放报表') {
                if (item.field == 'isShowLocal' || item.field == 'pointIds' ||
                    item.field == 'sensorNameList' || item.field == 'banci' ||
                    item.field == 'overLimitAlarm' ||
                    item.field == 'failureAlarm') {
                    item.type = 'yincang'
                }
                if (item.field == 'pumpName') {
                    item.type = 'multiple_select'
                }
                if (item.field == 'isShowLocalPoint') {
                    item.type = 'elcheckbox'
                }
            } else {
                if (item.field == 'banci' || item.field == 'overLimitAlarm' ||
                    item.field == 'failureAlarm' || item.field == 'pumpName' || item.field ==
                    'isShowLocalPoint') {
                    item.type = 'yincang'
                }
                if (item.field == 'sensorNameList' || item.field == 'pointIds') {
                    item.type = 'cascaderRadionarmal'
                }
                if (item.field == 'isShowLocal') {
                    item.type = 'elcheckbox'
                }
            }
        })
        if (state.leftLabelType) {
            getSelList()
        }

        theadsNewDetail.value = []
        theadsNew.value = []
    }
    getfreeReportTemplateList({})
    // 生成模板和替换模板按钮提交事件
    function cacelNewTempClick() {
        state.tihuanTempShow = false
        state.drawerShow = false
    }
    // 生成模板
    function shengchengmb() {
        if (addxTableRef.value) {
            const selected = addxTableRef.value.getCheckboxRecords() //选中的行
            const allData = addxTableRef.value.getData() //未选中的行
            const unselected = allData.filter(item => !selected.includes(item)) //是否有选
            allData.forEach(item => {
                item.show = 0
            })
            selected.forEach(item => {
                item.show = 1
            })
            state.formData.staticsList = allData
        }
        if (proxy.$refs.addxTableRef1) {
            const selected1 = proxy.$refs.addxTableRef1.getCheckboxRecords() //选中的行
            const allData1 = proxy.$refs.addxTableRef1.getData() //未选中的行
            const unselected1 = allData1.filter(item => !selected1.includes(item)) //是否有选
            allData1.forEach(item => {
                item.show = 0
            })
            selected1.forEach(item => {
                item.show = 1
            })
            state.formData.detailList = allData1
        }
        axios.post('/freeReportTemplate/addFreeReportTemplate', state.formData).then(res => {
            proxy.$modal.msgSuccess(res.msg);
            state.tihuanTempShow = false
            state.drawerShow = false
            getfreeReportTemplateList({})
        })
    }

    function tihuanNewTempClick() {
        shengchengmb()
    }

    function addNewTempClick() {
        if (state.tihuanState == '替换模板') {
            state.tihuanTempShow = true
        } else {
            shengchengmb()
        }


    }

    function unique(arr, key) {
        const res = new Map();
        return arr.filter((a) => !res.has(a[key]) && res.set(a[key], 1));
    }
    // 查询按钮触发事件
    async function query(data) {
        if (data.item) {
            if (data.item.field == 'datetime') {
                state.classObj.dateSuffix = dayjs(data.val1).format('YYYY-MM-DD')
            }
        }
        let stateTime = dayjs().format('YYYY-MM-DD')
        let endVal = dayjs(stateTime).endOf('month').date()
        if (data.type == 'report' && data.item.field == 'type') {
            if (data.val == 'Y') {
                state.options.queryList.querys.forEach(itembc => {
                    if (itembc.field == 'banci') {
                        itembc.type = 'yincang'
                    }
                })
                state.options.queryList.querys[1].type = 'datayear'
                state.options.queryList.querys[1].binddata = dayjs().format('YYYY')
            }
            if (data.val == 'C') {
                nextTick(() => {
                    state.options.queryList.querys.forEach(itembc => {
                        if (itembc.field == 'banci') {
                            itembc.type = 'selectspecial'
                        }
                    })
                })
                state.options.queryList.querys[1].type = 'datetimer'
                state.options.queryList.querys[1].binddata = dayjs().format('YYYY-MM-DD')
                state.classObj.dateSuffix = dayjs(state.options.queryList.querys[1].binddata)
                    .format('YYYY-MM-DD')
            }
            if (data.val == 'M') {
                state.options.queryList.querys.forEach(itembc => {
                    if (itembc.field == 'banci') {
                        itembc.type = 'yincang'
                    }
                })
                state.options.queryList.querys[1].type = 'datamonth'
                state.options.queryList.querys[1].binddata = dayjs().format('YYYY-MM')
            }
            if (data.val == 'W') {
                state.options.queryList.querys.forEach(itembc => {
                    if (itembc.field == 'banci') {
                        itembc.type = 'yincang'
                    }
                })
                state.options.queryList.querys[1].type = 'daterange'
                state.options.queryList.querys[1].binddata = [dayjs().startOf('isoWeek'), dayjs().endOf('isoWeek')]
            }
            if (data.val == 'D') {
                state.options.queryList.querys.forEach(itembc => {
                    if (itembc.field == 'banci') {
                        itembc.type = 'yincang'
                    }
                })
                state.options.queryList.querys[1].type = 'datetimer'
                state.options.queryList.querys[1].binddata = dayjs().format('YYYY-MM-DD')
            }
        }
        if (data.type == 44 && data.item.field == 'stationStatus') {
            if (data.val1 == 4) {
                state.torightList.forEach(item => {
                    if (item.tableheadstwo) {
                        setTimeout(() => {
                            item.tableheads = computed(() => table_headers[item.tableheadstwo])
                        }, 300)
                    }
                })
            } else {
                state.torightList.forEach(item => {
                    if (item.tableheadsone) {
                        setTimeout(() => {
                            item.tableheads = computed(() => table_headers[item.tableheadsone])
                        })
                    }
                })
            }
        }
        if (data.type == 44 && data.item.field == 'controlPortType') {
            if (data.val1 == 2) {
                state.torightList.forEach(item => {
                    if (item.tableheadstwo) {
                        setTimeout(() => {
                            item.tableheads = computed(() => table_headers[item.tableheadstwo])
                        }, 300)
                    }
                })
            } else {
                state.torightList.forEach(item => {
                    if (item.tableheadsone) {
                        setTimeout(() => {
                            item.tableheads = computed(() => table_headers[item.tableheadsone])
                        })
                    }
                })
            }
        }
        if (data.type == 5) {
            state.banciList.forEach(item => {
                if (item.id == data.val) {
                    state.classObj.classInfo = item
                    banciList(state.classObj)
                }
            })
        }
        if (state.options.queryList.querys[0].binddata == 'Y') {
            state.rangeTime.dataValue = [
                dayjs(state.options.queryList.querys[1].binddata).format('YYYY-01-01 00:00:00'), dayjs(
                    state.options.queryList.querys[1].binddata).format(
                    `YYYY-12-31 23:59:59`)
            ]
        } else if (state.options.queryList.querys[0].binddata == 'M') {
            state.rangeTime.dataValue = [dayjs(state.options.queryList.querys[1].binddata).format(
                'YYYY-MM-01 00:00:00'), dayjs(
                state.options.queryList.querys[1].binddata).format(
                `YYYY-MM-${dayjs(state.options.queryList.querys[1].binddata).endOf('month').date()} 23:59:59`
            )]
        } else if (state.options.queryList.querys[0].binddata == 'W') {
            state.rangeTime.dataValue = [dayjs(state.options.queryList.querys[1].binddata.length > 0 && state
                .options.queryList.querys[1].binddata[0]).format('YYYY-MM-DD HH:mm:ss'), dayjs(
                state.options.queryList.querys[1].binddata.length > 0 && state.options.queryList.querys[1]
                .binddata[1]
            ).format('YYYY-MM-DD HH:mm:ss')]
        } else if (state.options.queryList.querys[0].binddata == 'D') {
            state.rangeTime.dataValue = [
                dayjs(state.options.queryList.querys[1].binddata).format('YYYY-MM-DD 00:00:00'), dayjs(
                    state.options.queryList.querys[1].binddata).format(
                    `YYYY-MM-DD 23:59:59`)
            ]
        } else if (state.options.queryList.querys[0].binddata == 'C') {
            await getsearchAll()
        }

        if (data == 1) {
            state.searchObj[state.rangeTime.field[0]] = state.rangeTime.dataValue[0]
            state.searchObj[state.rangeTime.field[1]] = state.rangeTime.dataValue[1]
            state.options.queryList.querys.forEach(item => {
                state.searchObj[item.field] = item.binddata
                if (item.field == 'pumpName') {
                    if (item.binddata && item.binddata.length > 0) {
                        state.searchObj[item.field] = item.binddata.join(';')
                    }else{
                        state.searchObj[item.field]=item.binddata.toString()
                    }
                }
            })
            delete state.searchObj.datetime
            state.searchObj = {
                ...state.searchObj
            }
            state.leftLabelTypeList.forEach(itemType => {
                if (itemType.type == state.options.queryList.querys[0].binddata) {
                    if (itemType.staticsList != null && itemType.staticsList.length > 0) {
                        itemType.staticsList.forEach(item=>{
                            item.width='auto'
                        })
                        theadsNew.value = unique(
                            itemType.staticsList.filter((i) => i.show === 1), "field");
                    } else {
                        itemType.staticsList = []
                    }
                    if (itemType.detailList != null && itemType.detailList.length > 0) {
                        theadsNewDetail.value = unique(
                            itemType.detailList.filter((i) => i.show === 1),
                            "field");
                    } else {
                        theadsNewDetail.value = []
                    }
                }
            })
            if (!state.leftLabelType) {
                proxy.$modal.msgWarning('请先选择所要查询的报表');
            } else if (state.searchObj.pointIds.length == 0 && state.leftLabelType != '瓦斯抽放报表') {
                proxy.$modal.msgWarning('请选择所要查询的测点');
            }
            //  else if (state.searchObj.sensorNameList.length == 0 && state.leftLabelType != '瓦斯抽放报表') {
            //     proxy.$modal.msgWarning('请选择所要查询的设备名称');
            // }
             else {
                state.tableData=[]
                state.tableDataDetail=[]
                state.tableLoading = true
                if (state.detailUrl != null) {
                    axios.post(`/freeReportTemplate/${state.detailUrl}`, state.searchObj).then(res => {
                        state.tableDataDetail = res.data
                        state.tableLoading = false
                    })
                }

                axios.post(`/freeReportTemplate${state.dataUrl}`, state.searchObj).then(res => {
                    state.tableData = res.data
                    state.tableLoading = false
                })
            }
        }
        // 重置
        if (data == 2) {
            if (state.leftLabelTypeList[0].type == 'Y') {
                state.options.queryList.querys[1].type = 'datayear'
                state.options.queryList.querys[1].binddata = dayjs().format('YYYY')
            } else if (state.leftLabelTypeList[0].type == 'M') {
                state.options.queryList.querys[1].type = 'datamonth'
                state.options.queryList.querys[1].binddata = dayjs().format('YYYY-MM')
            } else if (state.leftLabelTypeList[0].type == 'W') {
                state.options.queryList.querys[1].type = 'daterange'
                state.options.queryList.querys[1].binddata = [dayjs().startOf('isoWeek'), dayjs()
                    .endOf('isoWeek')
                ]
            } else if (state.leftLabelTypeList[0].type == 'D') {
                state.options.queryList.querys[1].type = 'datetimer'
                state.options.queryList.querys[1].binddata = dayjs().format('YYYY-MM-DD')

            } else if (state.leftLabelTypeList[0].type == 'C') {
                state.options.queryList.querys[1].type = 'datetimer'
                state.options.queryList.querys[1].binddata = dayjs().format('YYYY-MM-DD')
            }
            state.options.queryList.querys.forEach(itemtr => {
                if (itemtr.field == 'isShowLocal' || itemtr.field == 'isShowLocalPoint' || itemtr.field ==
                    'overLimitAlarm') {
                    itemtr.binddata = false
                }
            })
            state.options.queryList.querys[0].binddata = state.leftLabelTypeList[0].type
            state.tableData = []
            state.tableDataDetail = []
        } else {
            if (data.item&&data.item.field != 'overLimitAlarm' && data.item&&data.item.field != 'failureAlarm') {
                getSelList()
            }
        }
    }

    function getsearchAll() {
        axios.post("/class/info/searchAll", {}).then(async (res) => {
            state.banciList = res.data.list;
            state.options.queryList.querys.forEach(item => {
                if (item.field == 'banci') {
                    item.options = res.data.list.map(itemsub => {
                        return {
                            label: itemsub.className,
                            value: itemsub.id
                        }
                    })
                    item.binddata = res.data.list[0].id
                }
            })
            state.classObj.classInfo = res.data.list[0]
            await banciList(state.classObj)
        })
    }
    // 列表拖宽度
    function resizeChange(e) {
        const {
            fullColumn
        } = e.$table.getTableColumn();
        fullColumn[e.columnIndex].width = fullColumn[e.columnIndex].renderWidth;
    }
    // 新建模板弹框列表拖拽事件
    const rowDrop = () => {
        const $table = addxTableRef.value
        if ($table) {
            sortableaddxTable = Sortable.create($table.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
                handle: '.drag-btn',
                onEnd: (sortableEvent) => {
                    const newIndex = sortableEvent.newIndex
                    const oldIndex = sortableEvent.oldIndex
                    const currRow = state.fieldInfoListData.splice(oldIndex, 1)[0]
                    state.fieldInfoListData.splice(newIndex, 0, currRow)
                    state.fieldInfoListData.forEach((item, index) => {
                        if (item.field == currRow.field) {
                            item.sort = newIndex + 1
                        } else {
                            item.sort = index + 1
                        }
                    })
                }
            })
        }
    }
    // 设备名称列表
    const rowDropdevice = () => {
        const $table = proxy.$refs.devicexTableRef
        sortableaddxTable = Sortable.create($table.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
            handle: '.drag-btndevice',
            onEnd: (sortableEvent) => {
                const newIndex = sortableEvent.newIndex
                const oldIndex = sortableEvent.oldIndex
                const currRow = state
                    .sortdeviceList.splice(oldIndex, 1)[0]
                state.sortdeviceList.splice(
                    newIndex, 0, currRow)
                state.sortdeviceList.forEach(
                    (item, index) => {
                        if (item.sensorName == currRow.sensorName) {
                            item.sort = newIndex + 1
                        } else {
                            item.sort = index + 1
                        }
                    })
            }
        })
    }
    // 测点列表
    const rowDroppoint = () => {
        const $table = proxy.$refs.pointxTableRef
        sortableaddxTable = Sortable.create($table.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
            handle: '.drag-btnpoint',
            onEnd: (sortableEvent) => {
                const newIndex = sortableEvent.newIndex
                const oldIndex = sortableEvent.oldIndex
                const currRow = state.sortpointList.splice(oldIndex, 1)[0]
                state.sortpointList.splice(
                    newIndex, 0, currRow)
                state.sortpointList.forEach((
                    item, index) => {
                    if (item.pointId == currRow.pointId) {
                        item.sort = newIndex + 1
                    } else {
                        item.sort = index + 1
                    }
                })
            }
        })
    }
    /**
     * 测点排序弹框取消事件
     */
    function cancelpoint() {
        state.addModal = false
    }
    /**
     * 测点排序弹框提交事件
     */
    function submitFormpoint() {
        let fieldInfoList = []
        let detailList = []
        state.leftLabelTypeList.forEach(item => {
            if (item.type == state.options.queryList.querys[0].binddata) {
                fieldInfoList = item.staticsList
                detailList = item.detailList
            }
        })
        let data = {
            type: state.options.queryList.querys[0].binddata,
            itemName: state.leftLabelType,
            pointInfoDtoList: state.sortpointList,
            sensorNameInfoDtoList: state.sortdeviceList,
            staticsList: fieldInfoList,
            detailList: detailList
        }
        axios.post('/freeReportTemplate/addFreeReportTemplate', data).then(res => {
            proxy.$modal.msgSuccess(res.msg);
            state.addModal = false
        })
    }
    // 通用行合并函数（将相同多列数据合并为一行）
    const rowspanMethod = ({
        row,
        _rowIndex,
        column,
        visibleData
    }) => {
        const fields = ['pointId', 'placeName', 'sensorName', 'identifyingNo', 'alarmNum',
            'totalAlarmAccumulationTime',
            'cutNum', 'totalCutAccumulationTime', 'feedNum', 'totalFeedAccumulationTime'
        ]
        const cellValue = row[column.field]
        if (cellValue && fields.includes(column.field)) {
            const prevRow = visibleData[_rowIndex - 1]
            let nextRow = visibleData[_rowIndex + 1]
            if (prevRow && prevRow[column.field] === cellValue) {
                return {
                    rowspan: 0,
                    colspan: 0
                }
            } else {
                let countRowspan = 1
                while (nextRow && nextRow[column.field] === cellValue) {
                    nextRow = visibleData[++countRowspan + _rowIndex]
                }
                if (countRowspan > 1) {
                    return {
                        rowspan: countRowspan,
                        colspan: 1
                    }
                }
            }
        }
    }
</script>
<style>
    @media print {
        .vxe-table {
            table-layout: fixed !important;
            width: 100% !important;
        }

        .vxe-table--render-default {
            border-collapse: collapse !important;
        }
    }
</style>
<style lang="scss" scoped>
    @media print {
        .vxe-table--render-default .vxe-body--row {
            /* 确保行合并样式在打印时生效 */
            page-break-inside: avoid;
        }
    }

    :deep(.addxTableRef1 .vxe-body--row) {
        background: rgba(227, 60, 100, .2);
    }

    .querybox {
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);
        margin-bottom: 10px;
    }

    .tableBox {
        padding: 16px;
        height: calc(100% - 120px);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);

        .tableBoxT {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0;
            margin: 0;
            margin-bottom: 10px;

            .biao {
                font-size: 18px;
                font-weight: 700;
            }

            .span {
                display: flex;
                align-items: center;

            }

        }
    }

    .leftBox {
        background: rgba(91, 109, 128, 0.04);
        padding: 8px;
        border-radius: 4px;
        height: 82vh;
    }

    .reportSetBox {
        padding: 12px;
        max-width: 596px;
        min-width: 400px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0px 2px 20px rgba(91, 109, 128, 0.2);
        backdrop-filter: blur(20px);
    }

    .leftmenuList {
        font-size: 16px;
        font-weight: 400;
        color: rgba(62, 70, 79, 1);

        .leftLabel {
            cursor: pointer;
            padding: 6px 0 6px 12px;
            margin-bottom: 8px;

            &.active {
                background-color: rgba(68, 136, 255, 0.08);
                color: rgba(68, 136, 255, 1);
                font-weight: 700;
            }
        }

    }
</style>
<style lang="scss" scoped>
    :deep(.el-dialog) {
        text-align: center;
        border-radius: 4px;
        border: 1px solid rgba(91, 109, 128, .1);
        background: linear-gradient(180deg, rgba(242, 247, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    }

    .pointBox {
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.4);
        border: 1px solid rgba(229, 231, 235, 1);
        padding-bottom: 10px;

        p {
            font-weight: 700;
            padding: 8px 12px;
            margin: 0;
            border-radius: 4px 4px 0 0;
            background-color: rgba(91, 109, 128, 0.04);
        }
    }

    .leftBox {
        padding: 8px;
        border-radius: 4px;
        height: 74vh;
    }
</style>